<template>
    <el-dialog
        title="添加权限"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal = false>
        <el-form ref="ruleForm" :rules="rules" :model="editUser">
            <el-form-item prop="sn">
                <el-input v-model="editUser.sn"
                style="width: 90%;margin-left: 50px"
                placeholder="请输入工号/学号"></el-input>
            </el-form-item>
            <el-form-item label="选择角色："
                          label-width="150px"
                          placeholder="请选择角色">
                <el-select v-model="editUser.roleId" style="width: 100%;" placeholder="选择角色">
                    <el-option
                        v-for="item in roles"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择本系统权限"
                          label-width="150px"
                          placeholder="请选择本系统权限">
                <el-select v-model="editUser.roleId" style="width: 100%" placeholder="选择本系统权限">
                    <el-option
                        v-for="item in roles"
                        :key="item.value"
                        :label="modifiedLabel(item)"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="display: flex; justify-content: center;">
            <el-button size="medium"
                       style="background: #166AFF;color: #FFFFFF; text-align: center;" @click="submit">确 认 提 交</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {addUser} from '../../../../api/ninth'
export default {
  name: 'NinthAddPermissions',
  data: function () {
    return {
      dialogVisible: false,
      editUser: {},
      roles: [],
      roles2: [{
        value: 1,
        label: '房源基建；房源分配；本科生房源；研究生房源'
      }, {
        value: 2,
        label: '本科生房源'
      }, {
        value: 3,
        label: '研究生房源'
      }, {
        value: 4,
        label: '无权限访问'
      }],
      imageUrl: '',
      rules: {
        name: [
          {required: true, message: '请输入真实姓名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入正确密码', trigger: 'blur'},
          { type: 'number', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    modifiedLabel (item) {
      switch (item.label) {
        case '主管理员':
          return '房源基建；房源分配；本科生房源；研究生房源'
        case '学工部科长':
          return '本科生房源'
        case '研工部科长':
          return '研究生房源'
        case '辅导员':
          return '无权限访问'
        default:
          return '无权限访问'
      }
    },
    show (user, roles) {
      // user和传过来的roles是同一个地址，修改会影响
      // 一般会进行克隆
      // 将对象先json字符串化，再json对象化
      this.editUser = JSON.parse(JSON.stringify(user))
      // editUser改头换面，先字符串化，再对象化，成为全新的变量
      this.roles = roles
      this.imageUrl = this.editUser.url
      this.dialogVisible = true
    },
    submit () {
      // 在提交之前作表单验证，验证数据已经全部符合规则
      this.$refs.ruleForm.validate(flag => {
        if (flag) {
          addUser(this.editUser).then(res => {
            if (res.data === true) {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              // 弹窗关闭
              this.dialogVisible = false
              // 刷新列表
              this.$emit('ok')
              // 向父组件传递消息
              // @ok="getUserList"刷新
            }
          })
        }
      })
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.editUser.url = res.url
    },
    beforeAvatarUpload (file) {
    }
  }/* ,
  watch: {
    'editUser.sn': function (newSn) {
      this.editUser.name = this.editUser.sn.toString()
      this.editUser.password = this.editUser.sn
    }
  } */
}
</script>

<style scoped>
@import "../../../../assets/styles/total/ninth.css";
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/deep/ .el-upload{
    border: 1px dotted #000000;
}

</style>
